<style lang="less">
  @import "roleManage";
</style>

<template>
<div class="role">
  <div class="role-search">
    <role-search @roleList="getResult"></role-search>
  </div>
  <div class="role-table" >
    <Table border stripe ref="selection" :columns="columns" :data="data" ></Table>
    <Drawer title="选择权限" v-model="value" width="600">
      <Row>
        <Col span="4" style="font-size: 20px">权限查询</Col>
        <Col span="8">
          <Input type="text" placeholder="请输入权限名或描述" v-model="fuzzyKey">
          <span slot="prepend">
            <Icon type="ios-contact" slot="prefix"/>
          </span>
          </Input>
        </Col>
        <Col span="8" offset="1">
          <Input type="text" placeholder="请输入权限代码" v-model="code">
          <span slot="prepend">
            <Icon :size="16" type="ios-lock" slot="prefix"/>
          </span>
          </Input>
        </Col>
        <Col span="2" offset="1"><Button type="primary" @click="searchPermission">查询</Button></Col>
      </Row>
      <Table stripe ref="selection" :columns="columns1" :data="data1"style="position: relative;top: 20px"></Table>
    </Drawer>
  </div>
</div>
</template>

<script>
  import RoleSearch from '../../../components/role-search/role-search'
  import {url} from '../../../../config/url'
    export default {
        name: "roleManage",
      components: {RoleSearch},
      component:{
          RoleSearch,
      },
      data(){
          return{
            value:false,
            roleId:'',
            authorityId:'',
            fuzzyKey:'',
            code:'',
            columns: [
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },
              {
                title:'ID',
                key:'id',
                width:90
              },
              {
                title: '角色名',
                key: 'name',
                width:200
              },
              {
                title: '描述',
                key: 'description'
              },
              {
                title: '操作',
                key: 'handle',
                width:140,
                render: (h, params) => {
                  return h('div', [
                    //配置角色权限
                    h('Button', {
                      props: {
                        icon:'md-settings'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.deploy(params.index)
                        }
                      }
                    }),
                    //删除角色
                    h('Button', {
                      props: {
                        icon:'ios-trash'
                      },
                      on: {
                        click: () => {
                          this.remove(params.index)
                        }
                      }
                    })
                  ]);
                }
              }
            ],
            data: [
            ],
            columns1: [
              {
                type: 'selection',
                width: 60,
                align: 'center'
              },{
                title:'ID',
                key:'id'
              },
              {
                title: '权限名',
                key: 'name',
              },
              {
                title: '描述',
                key: 'description'
              },
              {
                title:'代码',
                key:'code',
                width:80
              },
              {
                title: '操作',
                key: 'handle',
                width:90,
                render: (h, params) => {
                  return h('div', [
                    //配置角色权限
                    h('Button', {
                      props: {
                        type:'primary'
                      },
                      style: {
                        marginRight: '5px'
                      },
                      on: {
                        click: () => {
                          this.chooseAuthority(params.index)
                        }
                      }
                    },"确认"),
                  ]);
                }
              }
            ],
            data1: [
            ]
          }
      },
      methods:{
          //配置角色权限，选择角色ID
        deploy (index) {
          this.roleId=this.data[index].id;
          this.value=true
        },
        //删除权限
        remove (index) {
          let id=JSON.stringify([this.data[index].id]);
          this.$axios.delete(url+'/role',{
            params:{
              'data':id
            }
          }).then(res=>{
            if(res.data.error_code==0){
              this.data.splice(index, 1);
              alert("删除角色成功")
            }
            else{
              alert("删除角色失败")
            }
          });
        },
        //选择权限，给角色添加对应权限
        chooseAuthority(index){
          this.authorityId=this.data1[index].id;
          console.log(this.roleId+" "+this.authorityId)
        },
        //发送查询权限的条件
        searchPermission(){
          this.data1=[];
          let query=JSON.stringify({
            'name':this.fuzzyKey,
            'description':this.description,
            'code':this.code,
            'page_size':8,
            'fuzzy_key':['name','description'],
            'or_key':['name','description']
          });
          this.$axios.get(url+'/authority',{
            params:{
              'data':query
            }
          }).then(res=>{
            if(res.data.error_code==0){
              let records=res.data.data.records;
              let size=records.length;
              for(let i=0;i<size;i++){
                let record={
                  'id':records[i].id,
                  'name':records[i].name,
                  'description':records[i].description,
                  'code':records[i].code
                };
                this.data1.push(record)
              }
            }else{
              alert("查询失败"+res.data.error_msg)
            }
          })
        },
        //获取查询结果
        getResult(data){
          this.data=data
        }
      }
    }
</script>

<style scoped>
  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
